import { useState } from 'react';
import { DndContext, DragOverlay } from '@dnd-kit/core';

import { Draggable } from './Draggable';
import { ScrollableList } from './ScrollableList';
import { Item } from './Item';

function App() {
  const [items] = useState(['1', '2', '3', '4', '5']);
  const [activeId, setActiveId] = useState(null);

  return (
    <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
      {/* 列表 */}
      <ScrollableList>
        {items.map(id =>
          <Draggable key={id} id={id}>
            {id===activeId ? <div style={{border: '1px dashed #549AF0', backgroundColor: '#EFEFFA', width: '45px', height: '100px', margin: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}></div> : <Item value={`Item ${id}`} />}
          </Draggable>
        )}
      </ScrollableList>
      {/* ASD DragOverlay只设置了一个，只给激活的drag设置样式，自动匹配拖动的，activeId只是记录作用 */}
      {/* ASD 设置的是当前鼠标拖动的样式，不是影子的样式 */}
      <DragOverlay>
        {activeId ? (
          <Item value={`Item ${activeId}`} />
        ) : null}
      </DragOverlay>
    </DndContext>
  );
  /**
   * @description: onDragStart事件的event的event.active.id为拖动的drag的id,点击的时候触发，event.activatorEvent可以获取很多鼠标的点击信息
   * @param {*} event
   * @return {*}
   */
  function handleDragStart(event) {
    setActiveId(event.active.id);
  }

  function handleDragEnd() {
    setActiveId(null);
  }
}
export default App;